<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 组织架构 -->
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tools :tree-node="company" :is-root="true" @addDepts="addDepts" />
        <!--放置一个属性   这里的props和我们之前学习的父传子 的props没关系-->
        <!-- Tree 树形控件 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          default-expand-all
        >
          <!--     default-expand-all 是否展开子节点    element-ui -->
          <!-- 说明el-tree里面的这个内容 就是插槽内容 => 填坑内容  => 有多少个节点循环多少次 -->
          <!-- scope-scope 是 tree组件传给每个节点的插槽的内容的数据 -->
          <!-- 顺序一定是 执行slot-scope的赋值 才去执行 props的传值 -->
          <tree-tools slot-scope="{ data }" :tree-node="data" @addDepts="addDepts" @editDepts="editDepts" @delDepts="delDepts" />

        </el-tree>
      </el-card>
    </div>
    <!-- 放置新增弹层组件  -->
    <add-dept
      ref="addDept"
      :show-dialog.sync="showDialog"
      :tree-node="treeNode"
      @AddSuccess="getDepartments"
    />
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept' // 引入新增部门组件
import { getDepartments, delDepartment } from '@/api/departments'
import { tranListToTreeDate } from '@/utils/index'
// function tranListToTreeDate(list, rootValue) {
//   var arr = []
//   list && list.forEach(item => {
//     if (item.pid === rootValue) {
//       var arr1 = []
//       list.forEach(item1 => {
//         if (item1.pid === item.id) {
//           arr1.push(item1)
//           if (item1) {
//             item.children = arr1
//           }
//         }
//       })
//       arr.push(item)
//     }
//   })
//   return arr
// }
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      company: { }, // 头部数据
      departs: [],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      showDialog: false, // 显示窗体
      currement: null, // 编辑
      treeNode: {} // 记录弹层数据
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 获取数据
    async getDepartments() {
      const result = await getDepartments()
      // console.log(result)
      this.company = { name: result.companyName, manager: '负责人', id: '' }
      this.departs = tranListToTreeDate(result.depts, '') // 转化成树形结构
    },
    // 删除部门
    delDepts(id) {
      this.$confirm('您确定删除该部门吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delDepartment(id)
        this.$message.success('删除部门成功!')
        this.getDepartments()
      }).catch(() => {
        this.$message('删除部门失败!')
      })
    },
    // 添加部门
    addDepts(treeNode) {
      this.showDialog = true // 显示弹层
      this.treeNode = treeNode
    },
    // 编辑部门
    editDepts(treeNode) {
      this.showDialog = true // 显示弹层
      this.treeNode = treeNode
      this.$refs.addDept.getDepartDetail(treeNode.id)
    }
  }
}

</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;

}

</style>
